<template>
	<view class="wrap">
		<view v-if="list.length > 0">
			<view class="list" v-for="(item, index) in list" :key="item.ID">
				<view class="list_info">
					<view class="info_box dflex">
						<view class="info_head" @click="goUser(item.UserID)">
							<image class="headImg" :src="item.HeadImgUrl" mode="aspectFill"></image>

						</view>
						<view class="info_user">
							<view class="user_tit dflex">
								<view class="user_name hiddenText" @click="goUser(item.UserID)">
									{{ $util.entitiesToUtf16(item.Name, '挥友用户') }}

								</view>
								<view class="info_status" v-if="type == '极速联系' || type == '收到联系'"
									:style="{ color: typeColor[item.Status] }">
									{{ $util.getStatus(item.Status, type) }}
								</view>
								<view class="info_status" v-if="type == '一起挥'"
									:style="{ color: signUpType[item.Status] }">
									{{ $util.getStatus(item.Status, '用户报名') }}
								</view>
							</view>


							<view class="user_lit">
								<image v-if="item.Sex == '女'" class="sexImg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717060369601787.png"
									mode="widthFix"></image>
								<image v-if="item.Sex == '男'" class="sexImg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17170603856821233.png"
									mode="widthFix"></image>
								{{ item.Birthday ? getYearStr(item.Birthday) + '后' : ' 未知 ' }} |
								{{ item.UserCity || '未知' }}

								<view class="showEvaBox" v-if="type == '一起挥'">
									<view v-if="item.EvalResult == 2">
										<image mode="widthFix" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576429865104.png"></image>
										<text class="redFont">爽约</text>
									</view>
									<view v-if="item.EvalResult == 1">
										<image mode="widthFix" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576643932814.png"></image>
										<text>到场</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="lit">
						<!-- <view class="lit_cell" v-if="type == '一起挥'">
							<text>报名主题：</text>需要一个专业的运动指导
						</view> -->

						<view class="lit_cell" v-if="item.AppointmentTitle">
							<text>标题：</text>{{ $util.entitiesToUtf16(item.AppointmentTitle, '暂无标题信息') }}
						</view>
						<view class="lit_cell" v-if="type == '一起挥' || type == '找私教' || type == '招学员'">
							<text>备注：</text>{{ $util.entitiesToUtf16(item.Remark, '暂无备注信息') }}
						</view>
						<view class="lit_cell" v-if="type == '极速联系' || type == '收到联系'">
							<text>理由：</text>{{ $util.entitiesToUtf16(item.Remark, '暂无理由信息') }}
						</view>
					</view>
				</view>
				<view class="list_footer dflex">
					<view class="footer_time">
						{{ getTime(item.CreateTime) }}
					</view>
					<view class="footer_btn dflex">
						<!-- 极速联系同意/拒绝沟通 -->
						<block v-if="type == '收到联系'">
							<block v-if="item.Status == 2">
								<view class="btn_" @click="auditFriend(item.ID, -2, index)">
									拒绝沟通
								</view>
								<view class="btn_ btn_soild" @click="auditFriend(item.ID, 3, index)">
									同意沟通
								</view>
							</block>
						</block>
						<!-- 一起挥的同意与拒绝报名 -->
						<block v-if="type == '一起挥'">
							<block v-if="item.Status == 0">
								<view class="btn_" @click="auditItem(item.ID, -2, index)">
									拒绝
								</view>
								<view class="btn_ btn_soild" @click="auditItem(item.ID, 1, index)">
									同意
								</view>

							</block>
							<block v-if="item.Status == 1">
								<view class="btn_" @click="auditItem(item.ID, 0, index)">
									取消同意
								</view>
								<view class="btn_" @click="userSay(item.ID,item.EvalResult, index)">
									评价
								</view>
							</block>

							<!-- <block v-if="item.Status != 0">
								<view class="btn_ btn_none" :style="{ color: signUpType[item.Status] }">
									{{ $util.getStatus(item.Status, '用户报名') }}
								</view>
							</block> -->
						</block>
						<view class="btn_ btn_soild" v-if="checkInformation(item.Status)" @click="lookTel(item)">
							查看联系方式
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noList" v-else>
			<u-empty mode="list" width="100" height="100" icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
			:show="true" iconSize="32" text="暂无数据"></u-empty>
		</view>

		<uni-popup type="center" ref="telbox">
			<view class="tel_box">
				<view class="tel_close" @click="closeTel">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17157621475961272.png"
						mode="aspectFill"></image>
				</view>
				<view class="tit">
					联系方式
				</view>
				<view class="tel_main">
					<view class="main_cell">
						<view class="cell_info">
							<view class="cinfoBox">
								<text>电话号：{{ userInfo.Phone || '暂无联系电话' }}</text>
							</view>

						</view>
						<view class="cell_btn" @click="copyText(userInfo.Phone)">复制</view>
					</view>
					<view class="main_cell">
						<view class="cell_info">
							<view class="cinfoBox">
								<text>微信号：{{ userInfo.WechatNo || '暂无微信号' }}</text>
							</view>
						</view>
						<view class="cell_btn" @click="copyText(userInfo.WechatNo)">复制</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="userSayBox">
			<view class="userSaySty">
				<view class="title">
					<text>发表评价</text>
					<image mode="widthFix" @click="offP" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576502236448.png"></image>
				</view>
				<view class="checkContent">
					<view @click="chooseEvalResult(2)">
						<image mode="widthFix" v-show="evalResult == 2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576429865104.png"></image>
						<image mode="widthFix" v-show="evalResult != 2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576621921255.png"></image>
						<text>爽约</text>
					</view>
					<view @click="chooseEvalResult(1)">
						<image mode="widthFix" v-show="evalResult == 1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576643932814.png"></image>
						<image mode="widthFix" v-show="evalResult != 1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717576464511786.png"></image>
						<text>到场</text>
					</view>
				</view>
				<view class="btnSty" @click="submitEval">
					<button>提交评价</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			default: '',
			typeof: String
		},
		list: {
			default: [],
			typeof: Array
		}
	},
	data() {
		return {
			userInfo: {},
			typeColor: {	//极速联系审核/沟通状态 字体颜色
				'1': 'rgba(231,135,39,1)',
				'3': '#2BA139',
				'-2': '#666666'
			},
			signUpType: {	//一起挥是否已同意字体颜色(用户报名)
				'1': '#2BA139',
				'-2': '#FC201C'
			},
			timer: '',
			evalResult:0,
			evalID:'',
			evalIndex:''
		};
	},
	methods: {
		// 初始化数据/跟新数据
		init() {
			this.$emit('init')
		},
		// 修改原始数组的值（用于立刻修改状态）
		changeList(status, index) {
			this.$emit('changeList', status, index)
		},
		lookTel(e) {
			this.userInfo = e
			this.$refs.telbox.open()
		},
		closeTel() {
			this.$refs.telbox.close()
		},
		// 查看联系方式的出现条件
		checkInformation(status) {
			const type = this.type
			let yesORno = false
			if (((type == '收到联系' || type == '极速联系') && status == 3) || type == '找私教' || type == '招学员') {
				yesORno = true
			}
			return yesORno
		},
		// 点击复制
		copyText(e) {
			let that = this
			if (e) {
				uni.setClipboardData({
					data: e,
					success: function () {
						that.$pv.msg('已复制到剪切板')
					},
					fail: function () {
						that.$pv.msg('复制失败，请刷新重试')
					},
				});
			} else {
				this.$pv.msg('暂无数据可复制')
			}

		},
		//同意或拒绝加入组局(1 同意  -2 拒绝  0 :取消同意 )
		async auditItem(id, status, index) {
			let _this = this;
			let text = status == 0 ? '取消同意' : status == 1 ? "同意" : '拒绝'
			let content = status == 0 ? '确定要取消同意吗？' : `确定要${text}该挥友报名吗？`
			uni.showModal({
				title: '温馨提示',
				content: content,
				confirmText: text,
				success: async function (rs) {
					if (rs.confirm) {
						_this.apiSignComfirm(id, status, index)
					} else if (rs.cancel) {
					}
				}
			});

		},
		// 评价
		async userSay(ID,EvalResult,index){
			this.evalID = ID
			this.evalResult = EvalResult
			this.evalIndex = index
			this.$refs.userSayBox.open()
		},
		offP(){
			this.$refs.userSayBox.close()
		},
		chooseEvalResult(num){
			this.evalResult = num
		},
		async submitEval(){
			if(this.evalResult == 0) return
			let res = await this.$api.post('Appointment/EvalPeople', {
				ID:this.evalID,
				EvalResult:this.evalResult
			})
			if(res.code == 0){
				this.$pv.msg("评价成功")
				this.$refs.userSayBox.close()
				let listData = this.list[this.evalIndex]
				listData.EvalResult = this.evalResult
				this.$set(this.list, this.evalIndex, listData)
			}
		},
		// 调用报名接口
		async apiSignComfirm(id, status, index) {
			this.$api.post('Appointment/SignComfirm', {
				ID: id,
				Status: status
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.changeList(status, index)
					this.$pv.msg('操作成功');
				} else {
					this.$pv.msg(message);
				}

			});

		},
		//同意或拒绝极速联系
		async auditFriend(id, status, index) {
			let str = status == 3 ? '同意' : '拒绝'
			let _this = this;
			uni.showModal({
				title: '温馨提示',
				content: `确定要${str}吗？`,
				confirmText: str,
				success: async function (rs) {
					if (rs.confirm) {
						_this.apiFriendAudit(id, status, index)
					} else if (rs.cancel) {
					}
				}
			});
		},
		formSubmit: function(e) {
			// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
		},
		// 调用是否同意极速联系接口
		async apiFriendAudit(id, status, index) {
			// 是否完善联系方式
			let res = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});

			if (!(res.data.Phone || res.data.WechatNo) && res.code == 0 && status == 3) {
				this.$pv.msg("请先完善个人信息")
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.nav_to('/pages/user/user_edit')
				}, 2000)
				return;
			};

			this.$api.post('Friend/Audit', {
				ID: id,
				Status: status
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.changeList(status, index)
					this.$pv.msg('操作成功');
				} else {
					this.$pv.msg(message);
				}

			});

		},
		// 跳转到会员中心页
		goUser(id) {
			this.nav_to(`/pages/user/user_visitor?id=${id}`)
		},
	}
}
</script>

<style lang="scss">
.dflex {
	display: flex;
	align-items: center;
}

view,
text {
	box-sizing: border-box;
}

image {
	width: 100%;
	height: 100%;
}

.wrap {
	padding: 0 24rpx;

	.list {
		margin-top: 24rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.list_info {
			.info_box {
				margin-bottom: 24rpx;

				.info_head {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-right: 24rpx;
					position: relative;

					.headImg {
						border-radius: 50%;
					}

				}

				.info_user {
					flex: 1;

					.user_tit {
						justify-content: space-between;

						.user_name {
							margin-bottom: 4rpx;
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							max-width: 380rpx;
							position: relative;


						}

						.info_status {
							font-size: 24rpx;
							color: rgba(231, 135, 39, 1);
						}
					}

					.user_lit {
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						.sexImg {
							width: 32rpx;
							height: 32rpx;
							// margin-left: 16rpx;
							margin-right: 16rpx;
						}
						.showEvaBox{
							margin-left: auto;
							display: flex;
							justify-content: flex-end;
							>view{
								display: flex;
								align-items: center;
								font-weight: 500;
								font-size: 24rpx;
								>image{
									width: 32rpx;
									margin-right: 10rpx;
								}
								.redFont{
									color: #FF1E1E;
								}
							}
						}
					}
				}
			}

			.lit {
				font-size: 28rpx;
				color: #333333;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #E4E4E4;

				text {
					font-size: 28rpx;
					color: #999999;
				}

				.lit_cell {
					margin-bottom: 12rpx;
				}

				.lit_cell:last-child {
					margin-bottom: 0;
				}
			}
		}

		.list_footer {
			margin-top: 24rpx;
			justify-content: space-between;

			.footer_time {
				font-size: 24rpx;
				color: #999999;
			}

			.footer_btn {
				.btn_ {
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #333333;
					padding: 10rpx 32rpx;
					border-radius: 50rpx;
					border: 2rpx solid #E4E4E4;
				}

				.btn_soild {
					color: #fff;
					background: #706EEE;
					border: 2rpx solid #706EEE;
				}

				.btn_none {
					background: transparent;
					border-color: transparent;
				}
			}
		}
	}

	.tel_box {
		background: #FFFFFF;
		border-radius: 24rpx;
		width: 70vw;
		// height: 480rpx;
		box-sizing: border-box;
		padding: 24rpx;
		position: relative;

		.tel_close {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80%;
				height: 80%;
			}
		}

		.tit {
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			color: #0D0D0D;
			padding-bottom: 34rpx;
			border-bottom: 2rpx solid #E4E4E4;
			;
		}

		.tel_main {
			padding: 16rpx 0;

			.main_cell {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.cell_info {
					font-size: 28rpx;

					.cinfoBox {

						display: flex;
					}

					text {
						// min-width: 118rpx;
						font-size: 28rpx;
						color: #666666;
						word-break: break-all;
					}
				}

				.cell_btn {
					font-size: 28rpx;
					color: #706EEE;
					padding: 16rpx;
					min-width: 100rpx;
				}
			}

			.main_cell:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.noList {
	width: 100%;
	padding: 60rpx 0;
	color: #999999;
	font-size: 34rpx;
	text-align: center;
}
.userSaySty{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 50rpx 60rpx 50rpx;
	background: white;
	border-radius: 25rpx;
	width: 588rpx;
	height: 492rpx;
	.title{
		position: relative;
		width: 100%;
		text-align: center;
		>image{
			position: absolute;
			right: 0;
			width: 44rpx;
		}
	}
	.checkContent{
		display: flex;
		justify-content: space-around;
		width: 100%;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			>image{
				width: 120rpx;
				height: 120rpx;
			}
		}
		
	}
	.btnSty{
		button{
			    background-color: #706eee;
				border-radius: 50rpx;
				display: flex;
				flex-direction: column;
				padding: 5rpx 152rpx;
				color: white;
		}
	}
}
</style>
